<template>
    <div>
        <navBar class="navBar"></navBar>
        <el-container class="content">
            <el-aside width="200px" v-loading="loading" class="aside">
                <div class="similarVideo">
                    同类视频
                </div>
                <div class="list">
                    <div class="item" v-for="item in getRecommend" @click="gotoVideo(item)">
                        <div class="box">
                            <div class="boxContent">
                                <video class="video" preload="metadata" loop :src="item.videoAddress"></video>
                            </div>
                        </div>
                        <div class="item">{{ item.videoName ?? '' }}</div>
                    </div>
                </div>
            </el-aside>
            <el-container>
                <el-header class="header">
                    <div class="title">{{ videoNow?.videoName ?? '' }}</div>
                    <div class="item">{{ videoNow?.resourceDescription ?? '' }}</div>
                </el-header>
                <el-main>
                    <div class="box">
                        <div class="boxContent">
                            <video class="video" preload="metadata" loop autoplay controls
                                :src="videoNow?.videoAddress ?? '###'"></video>
                        </div>
                    </div>
                </el-main>
                <el-footer>
                    <div class="foot">
                        <el-badge :value="videoNow?.likeNum" class="badge">
                            <el-button :type="likeBookStatus?.likeStatus ? 'warning' : ''" icon="iconfont icon-good"
                                circle @click="setLike"></el-button>
                        </el-badge>
                        <el-badge :value="videoNow?.bookNum" class="badge">
                            <el-button :type="likeBookStatus?.bookStatus ? 'warning' : ''" icon="el-icon-star-off"
                                circle @click="setBookmark"></el-button>
                        </el-badge>
                    </div>
                </el-footer>
            </el-container>
        </el-container>
        <div class="content">
            <div class="my-reply">
                <el-avatar class="header-img" :size="40" :src="userInfo?.userImageAddress"></el-avatar>
                <div class="reply-info">
                    <el-input v-model="inputComment" class="reply-input" placeholder="输入评论..." clearable>
                        <template slot="prepend" v-if="sonInputComment">
                            <el-tooltip class="item" effect="dark" content="单及取消" placement="top-start">
                                <div @click="sonInputComment = undefined">{{ `@ ${sonInputComment.userName}` }}</div>
                            </el-tooltip>
                        </template>
                    </el-input>
                </div>
                <div class="reply-btn-box">
                    <el-button class="reply-btn" size="medium" @click="sendComment" type="primary">发表评论</el-button>
                </div>
            </div>
            <review :comments="comments" @sonSendComment="sonSendComment" @getCommit="getCommit"></review>
        </div>
    </div>
</template>

<script>
import navBar from '@/components/navBar.vue'
import review from '@/components/review.vue'
import { recommend, commit, like, bookmark, recordVideo, likeBookInfo, createCommit, commitLike } from '@/api/video'
export default {
    components: {
        navBar,
        review
    },
    data() {
        return {
            userInfo: undefined,
            loading: false,
            videoList: new Array(),
            videoId: undefined,
            videoNow: undefined,
            likeBookStatus: undefined,
            inputComment: undefined,
            sonInputComment: undefined,
            commentList: new Array()
        }
    },
    computed: {
        getRecommend() {
            this.loading = true
            let arr = this.videoList.filter(item => (item.videoId != this.videoId && item.videoClassificationId == this.videoNow.videoClassificationId))
            if (arr.length > 10) {
                let list = new Array()
                while (list.length == 5) {
                    list.push(arr[Math.floor(Math.random() * arr.length)])
                }
                this.loading = false
                return list
            } else {
                this.loading = false
                return arr
            }
        },
        comments() {
            return structuredClone(this.commentList).map(item => {
                const date = new Date(item.createTime)
                item.createTime = date.toLocaleDateString().replace(/\//g, "-") + " " + date.toTimeString().substr(0, 8)
                if (item?.commentList) {
                    item.commentList.map(item => {
                        const date = new Date(item.createTime)
                        item.createTime = date.toLocaleDateString().replace(/\//g, "-") + " " + date.toTimeString().substr(0, 8)
                    })
                }
                return item
            })
        }
    },
    mounted() {
        this.userInfo = this.$store.getters.token
        if (this.$store.getters.videoData) {
            this.videoId = this.$store.getters.videoData.videoId
            this.videoNow = this.$store.getters.videoData
        } else {
            this.$router.push({ path: '/' })
        }
        const data = {
            userId: this.userInfo.userId,
            videoId: this.videoId,
            clickStatus: 1
        }
        recordVideo(data).catch(res => {
            this.$message(res.errorMessage)
        })
        this.likeBook()
        this.getVideo()
        this.getCommit()
    },
    methods: {
        getVideo() {
            this.loading = true
            recommend().then(res => {
                this.videoList = res.data
            }).finally(() => { this.loading = false })
        },
        getCommit() {
            const data = {
                commentType: 1,
                commentId: this.videoId
            }
            commit(data).then(async res => {
                let i = 0
                for await (const r of res.data.map(item => commitLike({
                    userId: this.userInfo.userId,
                    commentId: item.commendId
                }))) {
                    res.data[i++].likeStatus = r.data
                }
                i = 0
                for await (const r of res.data.map(item => commit({
                    commentType: 2,
                    commentId: item.commendId
                }))) {
                    res.data[i].commentList = r.data
                    let j = 0
                    for await (const r of res.data[i].commentList.map(item => commitLike({
                        userId: this.userInfo.userId,
                        commentId: item.commendId
                    }))) {
                        res.data[i].commentList[j++].likeStatus = r.data
                    }
                    i++
                }
                this.commentList = res.data
            })
        },
        likeBook() {
            const data = {
                userId: this.userInfo.userId,
                videoId: this.videoId
            }
            likeBookInfo(data).then(res => {
                this.likeBookStatus = res.data
            })
        },
        setLike() {
            let data = {
                videoId: this.videoId,
                userId: undefined,
                commentId: this.videoId,
                commentType: '1',
                Status: (this.likeBookStatus.likeStatus + 1) % 2
            }
            if (this.$store.getters.token.userId) {
                data.userId = this.$store.getters.token.userId
            } else {
                this.$router.push({ path: '/' })
            }
            like(data).then(res => {
                this.$message(res.errorMessage)
                this.likeBook()
            })
        },
        setBookmark() {
            let data = {
                videoId: this.videoId,
                userId: undefined,
                Status: 1
            }
            if (this.$store.getters.token.userId) {
                data.userId = this.$store.getters.token.userId
            } else {
                this.$router.push({ path: '/' })
            }
            bookmark(data).then(res => {
                this.$message(res.errorMessage)
                this.likeBook()
            })
        },
        sendComment() {
            if (this.inputComment) {
                const data = {
                    userId: this.userInfo.userId,
                    commentId: this.sonInputComment ? this.sonInputComment?.commendId : this.videoId,
                    commentContent: this.inputComment,
                    commentType: this.sonInputComment ? 2 : 1
                }
                createCommit(data).then(res => {
                    this.sonInputComment = undefined
                    this.inputComment = undefined
                    this.getCommit()
                })
            } else {
                this.$message({
                    showClose: true,
                    type: 'warning',
                    message: '评论不能为空'
                })
            }
        },
        sonSendComment(value) {
            this.sonInputComment = value
        },
        gotoVideo(value) {
            this.$router.push({ path: '/video', query: { videoId: value.videoId } })
        }
    }
}
</script>

<style scoped>
.navBar {
    position: sticky;
    top: -178px;
    z-index: 1;
}

.content {
    width: 80%;
    min-width: 1100px;
    margin: auto;
    padding-top: 30px;
}

.aside {
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
}

.aside::-webkit-scrollbar {
    width: 3px;
    height: 1px;
}

.aside::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #F90;
    background-image:
        -webkit-linear-gradient(45deg,
            rgba(255, 255, 255, .2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, .2) 50%,
            rgba(255, 255, 255, .2) 75%,
            transparent 75%,
            transparent);
}

.aside::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #EDEDED;
}

.similarVideo {
    padding: 10px;
}

.list {
    width: 100%;
    height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.box {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.item {
    width: 100%;
}

.list>.item:nth-child(n+2) {
    margin-top: 10px;
}

.boxContent {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    background-color: black
}

.video {
    width: 100%;
    height: 100%;
}

.el-header {
    margin: 0px 20px;
}

.title {
    font-size: 24px;
}

.foot {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.foot>.el-button {
    margin: 0px 50px;
}

.my-reply {
    padding: 10px;
    background-color: #fafbfc;
    display: flex;
    align-items: center;
}

.my-reply .header-img {
    display: inline-block;
    vertical-align: top;
}

.my-reply .reply-info {
    display: inline-block;
    margin-left: 5px;
    width: 90%;
}

@media screen and (max-width: 1200px) {
    .my-reply .reply-info {
        width: 70%;
    }
}

.my-reply .reply-info .reply-input {
    min-height: 20px;
    line-height: 22px;
    color: #ccc;
    background-color: #fff;
    border-radius: 5px;
}

.my-reply .reply-info .reply-input::v-deep .el-input__inner:focus {
    padding: 8px 8px;
    border: 2px solid blue;
}

.my-reply .reply-info .reply-input::v-deep .el-input__clear {
    color: skyblue;
}

.my-reply .reply-info .reply-input::v-deep .el-input__clear:hover {
    color: blue;
}

.my-reply .reply-info .reply-input:empty:before {
    content: attr(placeholder);
}

.my-reply .reply-info .reply-input:focus:before {
    content: none;
}

.my-reply .reply-info .reply-input:focus {
    padding: 8px 8px;
    border: 2px solid #00f;
    box-shadow: none;
    outline: none;
}

.my-reply .reply-btn-box {
    height: 25px;
    margin: 10px 0;
    display: flex;
    align-items: center;
}

.my-reply .reply-btn-box .reply-btn {
    position: relative;
    float: right;
    margin-right: 15px;
}

.badge {
    margin-top: 10px;
    margin-right: 40px;
}
</style>